<template>
  <div class="mainContainer">
    <div class="left">
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        style="margin-bottom: 10px">
      </el-input>
      <el-tree
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        accordion
        :filter-node-method="filterNode"
        @node-click="turn"
        ref="tree">
      </el-tree>
    </div>
    <div class="right">
      <el-table
        stripe="true"
        :data="tableData"
        style="width: 100%">
        <el-table-column
            label="学号"
            prop="number">
        </el-table-column>
        <el-table-column
            label="姓名"
            prop="name">
        </el-table-column>
        <el-table-column
            label="性别"
            prop="sex">
        </el-table-column>
        <el-table-column
            align="right">
            <template slot="header">
                <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                type="primary"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">个人信息</el-button>
                <el-button
                type="primary"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">查看成绩</el-button>
            </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
            number: '2019114455',
            name: '王小虎',
            sex: '男'
            }, {
            number: '2019114456',
            name: '小明',
            sex: '男'
            },{
            number: '2019114457',
            name: '小红',
            sex: '女'
            }],
            search: '',
          filterText: '',
          data: [{
            id: 1,
            label: '2021年下学期',
            children: [{
              id: 9,
              label: '机械一班'
            }, {
              id: 10,
              label: '机械三班'
            }]
          },{
            id: 1,
            label: '2021年上学期',
            children: [{
              id: 9,
              label: '计算机一班'
            }, {
              id: 10,
              label: '计算机三班'
            }]
          },{
            id: 1,
            label: '2020年上学期',
            children: [{
              id: 9,
              label: '电气一班'
            }, {
              id: 10,
              label: '电气三班'
            }]
          }],
          defaultProps: {
            children: 'children',
            label: 'label'
          }
        }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      turn(data) {
        this.$message('成功转到' + data.label + '该结点')
      }
    }
}
</script>

<style lang="less" scoped>
.mainContainer {
  height: 100%;
  width:100%;
  display: flex;
}
.left {
  height: 100%;
  width:30%;
  display: block;
  padding: 10px;
}
.right {
  height: 100%;
  width:70%;
  display: flex;
  padding: 10px;
}
</style>